<template>
<div class="bangumi">
  <el-card class="box-card" shadow="hover">
    <!-- 标题 -->
    <div slot="header" class="clearfix" align="center">
      <h3>番剧列表</h3>
    </div>
    <!-- 内容 -->
    <div class="container">
      <!-- 番剧 -->
      <ul>
        <li v-for="(bangumi, index) in bangumiList" :key="index">
          <div class="yukino-bangumi">
            <!-- 番剧封面 -->
            <a class="bangumi-img" 
              :href="'/media/md' + bangumi.index">
              <el-image style="width: 150px; height:200px" 
                :src="bangumi.img">
              </el-image>
            </a>
            <div class="bangumi-content">
              <!-- 番剧标题 -->
              <div class="bangumi-title">
                <a 
                  :href="'/media/md' + bangumi.index">
                  {{bangumi.name}}
                </a>
              </div>
              <!-- 番剧简介 -->
              <div class="bangumi-intros">简介：{{bangumi.intros}}</div>
              <!-- 番剧剧集 -->
              <div class="bangumi-episode">
                <a class="episode-button" 
                  v-for="(item, index) of bangumi.episode" 
                  :href="'/play/md' + bangumi.index + '/ep' + item" 
                  :key="index">{{item}}</a>
              </div>
            </div>
          </div>
          <!-- 最后一部番剧后不用分隔符 -->
          <el-divider v-if="bangumi.index < bangumiList.length"></el-divider>

        </li>
      </ul>
    </div>
  </el-card>
</div>
</template>
<script>
export default {
  name: 'yukinoBangumi',
  data () {
    return {
      bangumiList: null,
    }
  },
  methods: {
    getBangumiList () {
      let _this = this;
      this.$axios.get("/api/getBangumi.php").then((res)=> {
        _this.bangumiList = res.data;
        for(var i = 0; i < _this.bangumiList.length; i++) {
          _this.bangumiList[i].episode = parseInt(_this.bangumiList[i].episode);
          _this.bangumiList[i].img = "http://localhost:80/yukino_img/" + _this.bangumiList[i].img;
        }
      })
    },
  },
  created () {
    this.getBangumiList();
  }
}</script>

<style scoped>
.el-card {
  width: 60%;
  min-width: 600px;
  margin: 50px auto;
}
.el-card h3 {
  font-size: 22px;
}
.yukino-bangumi a {
  cursor: pointer;
}
.bangumi-img {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  width: 160px;
  height: 214px;
  margin-right: 20px;
  float: left;
}
.bangumi-content {
  position: relative;
  overflow: hidden;
  min-height: 214px;
}
.bangumi-title {
  height: 24px;
  margin-bottom: 15px;
  font-size: medium;
  font-weight: 600;
}
.bangumi-title a {
  cursor: pointer;
}
.bangumi-intros {
  font-size: 12px;
  margin-bottom: 21px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.bangumi-episode {
  padding-top: 10px;
}
.episode-button {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  text-align: center;
  line-height: 30px;
  color: #687391;
  font-weight: 600;
  float:left;
  margin: 4px;
}
.episode-button:hover {
  color: #fff;
  background: #687391;
}
</style>